<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>陆运订单录入</title>
  <link rel="stylesheet" href="src/css/iview.css">
  <link rel="stylesheet" href="src/css/vue-style.css">
</head>

<body>
  <div id="app">
    <div class="vue-wrapper">
      <!-- 原单信息 -->
      <div class="order-entry">
        <div class="order-entry_title">
          <h4>原单信息</h4>
          <span>
            <i class="ivu-icon ivu-icon-ios-arrow-up" ref="orderToggleIcon1"></i>
            <b @click="orderToggleTitle1()" ref="orderToggleTitle1">收起</b>
          </span>
        </div>
        <div class="order-entry_content" v-if="orderToggleContent1">
          <Row :gutter="16">
            <i-col class="percent20">
              <div class="common-input">
                <span class="prepend required">物流单号</span>
                <div class="common-input-flex">
                  <i-input v-model="shipmentNumber" />
                </div>
              </div>
            </i-col>
            <i-col class="percent20">
              <div class="common-input">
                <span class="prepend required">业务单号</span>
                <div class="common-input-flex">
                  <i-input v-model="businessNumber" />
                </div>
              </div>
            </i-col>
            <i-col class="percent20">
              <div class="common-input">
                <span class="prepend">主提货单号</span>
                <div class="common-input-flex">
                  <i-input v-model="pickupNumber" />
                </div>
              </div>
            </i-col>
            <i-col class="percent20">
              <div class="common-input">
                <span class="prepend">始发城市</span>
                <div class="common-input-flex">
                  <i-input v-model="pickupNumber" />
                </div>
                <span class="append">
                  <Button type="primary" class="ivu-icon ivu-icon-ios-search"></Button>
                </span>
              </div>
            </i-col>
            <i-col class="percent20">
              <div class="common-input">
                <span class="prepend">目的城市</span>
                <div class="common-input-flex">
                  <i-input v-model="pickupNumber" />
                </div>
                <span class="append">
                  <Button type="primary" class="ivu-icon ivu-icon-ios-search"></Button>
                </span>
              </div>
            </i-col>
          </Row>
        </div>
      </div>
      <!-- 发货方 -->
      <div class="order-entry">
        <div class="order-entry_title">
          <h4>发货方</h4>
          <Checkbox v-model="shipper.checked">保存到常用联系人</Checkbox>
          <span>
            <i class="ivu-icon ivu-icon-ios-arrow-up" ref="orderToggleIcon2"></i>
            <b @click="orderToggleTitle2()" ref="orderToggleTitle2">收起</b>
          </span>
        </div>
        <div class="order-entry_content" v-if="orderToggleContent2">
          <Row :gutter="16">
            <i-col class="percent20">
              <div class="common-input">
                <span class="prepend required">发货人</span>
                <div class="common-input-flex">
                  <i-input v-model="shipper.sender" />
                </div>
                <span class="append">
                  <Button type="primary" class="ivu-icon ivu-icon-ios-search"></Button>
                </span>
              </div>
            </i-col>
            <i-col class="percent20">
              <div class="common-input">
                <span class="prepend required">发货联系人</span>
                <div class="common-input-flex">
                  <i-input v-model="shipper.contact" />
                </div>
                <span class="append">
                  <Button type="primary" class="ivu-icon ivu-icon-ios-search"></Button>
                </span>
              </div>
            </i-col>
            <i-col class="percent20">
              <div class="common-input">
                <span class="prepend">发货单位</span>
                <div class="common-input-flex">
                  <i-input v-model="shipper.unit" />
                </div>
              </div>
            </i-col>
            <i-col class="percent20">
              <div class="common-input">
                <span class="prepend required">联系电话</span>
                <div class="common-input-flex">
                  <i-input v-model="shipper.tel" />
                </div>
              </div>
            </i-col>
            <i-col class="percent20">
              <div class="common-input">
                <span class="prepend required">所在地</span>
                <div class="common-input-flex">
                  <i-input v-model="shipper.address" />
                </div>
                <span class="append">
                  <Button type="primary" class="ivu-icon ivu-icon-ios-search"></Button>
                </span>
              </div>
            </i-col>
          </Row>
          <Row :gutter="16">
            <i-col class="percent40">
              <div class="common-input">
                <span class="prepend required">详细地址</span>
                <div class="common-input-flex">
                  <i-input v-model="shipper.detailAddress" />
                </div>
              </div>
            </i-col>
            <i-col class="percent40">
              <div class="search-data common-input">
                <span class="prepend required">要求到达时间</span>
                <div class="common-input-flex">
                  <date-picker type="date" v-model="shipper.startDate"></date-picker>
                </div>
                <i class="input-line">—</i>
                <div class="common-input-flex">
                  <date-picker type="date" v-model="shipper.endDate"></date-picker>
                </div>
              </div>
            </i-col>
            <i-col class="percent20">
              <div class="common-input">
                <span class="prepend">时限(0为不限)</span>
                <div class="common-input-flex">
                  <i-input v-model="shipper.deadline" />
                </div>
                <span class="append unit">天</span>
              </div>
            </i-col>
          </Row>
        </div>
      </div>
      <!-- 收货方 -->
      <div class="order-entry">
        <div class="order-entry_title">
          <h4>收货方</h4>
          <Checkbox v-model="receipt.checked">保存到常用联系人</Checkbox>
          <span>
            <i class="ivu-icon ivu-icon-ios-arrow-up" ref="orderToggleIcon3"></i>
            <b @click="orderToggleTitle3()" ref="orderToggleTitle3">收起</b>
          </span>
        </div>
        <div class="order-entry_content" v-if="orderToggleContent3">
          <Row :gutter="16">
            <i-col class="percent20">
              <div class="common-input">
                <span class="prepend required">收货人</span>
                <div class="common-input-flex">
                  <i-input v-model="receipt.receiver" />
                </div>
                <span class="append">
                  <Button type="primary" class="ivu-icon ivu-icon-ios-search"></Button>
                </span>
              </div>
            </i-col>
            <i-col class="percent20">
              <div class="common-input">
                <span class="prepend">网点</span>
                <div class="common-input-flex">
                  <i-input v-model="receipt.network" />
                </div>
                <span class="append">
                  <Button type="primary" class="ivu-icon ivu-icon-ios-search"></Button>
                </span>
              </div>
            </i-col>
            <i-col class="percent20">
              <div class="common-input">
                <span class="prepend required">收货单位</span>
                <div class="common-input-flex">
                  <i-input v-model="receipt.unit" />
                </div>
              </div>
            </i-col>
            <i-col class="percent20">
              <div class="common-input">
                <span class="prepend required">联系电话</span>
                <div class="common-input-flex">
                  <i-input v-model="receipt.tel" />
                </div>
              </div>
            </i-col>
            <i-col class="percent20">
              <div class="common-input">
                <span class="prepend required">所在地</span>
                <div class="common-input-flex">
                  <i-input v-model="receipt.address" />
                </div>
                <span class="append">
                  <Button type="primary" class="ivu-icon ivu-icon-ios-search"></Button>
                </span>
              </div>
            </i-col>
          </Row>
          <Row :gutter="16">
            <i-col class="percent40">
              <div class="common-input">
                <span class="prepend required">详细地址</span>
                <div class="common-input-flex">
                  <i-input v-model="receipt.detailAddress" />
                </div>
              </div>
            </i-col>
            <i-col class="percent40">
              <div class="common-input">
                <span class="prepend">区域指定</span>
                <div class="common-input-flex">
                  <i-select v-model="receipt.selectRegion">
                    <i-option v-for="item in receipt.region" :value="item.value" :key="item.value">{{item.label }}</i-option>
                  </i-select>
                </div>
              </div>
            </i-col>
          </Row>
        </div>
      </div>
      <!-- 货物信息&物流服务要求 -->
      <Row :gutter="16">
        <i-col span="12">
          <!-- 货物信息 -->
          <div class="order-entry">
            <div class="order-entry_title">
              <h4>货物信息</h4>
              <div class="common-input percent40 ml-10 mr-10">
                <span class="prepend required">货物类型</span>
                <div class="common-input-flex">
                  <i-select v-model="goods.selectType">
                    <i-option v-for="item in goods.type" :value="item.value" :key="item.value">{{item.label }}</i-option>
                  </i-select>
                </div>
              </div>
              <div class="full-btn fl">
                <Button type="primary" @click="goodsModal = true">选择货物</Button>
              </div>
              <span>
                <i class="ivu-icon ivu-icon-ios-arrow-up" ref="orderToggleIcon4"></i>
                <b @click="orderToggleTitle4()" ref="orderToggleTitle4">收起</b>
              </span>
            </div>
            <div class="order-entry_content" v-if="orderToggleContent4">
              <div class="cargo-info-table">
                <table class="cargo-info-table_head">
                  <thead>
                    <tr>
                      <th style="width: 5%;"></th>
                      <th style="width: 40%;">货物名称</th>
                      <th style="width: 15%;" v-if="GoodsType == '1'">批号</th>
                      <th style="width: 10%;">件数</th>
                      <th style="width: 10%;">重量(kg)</th>
                      <th style="width: 10%;">体积(m³)</th>
                      <th style="width: 10%;">操作</th>
                    </tr>
                  </thead>
                </table>
                <div style="height: 150px; overflow-y: auto;">
                  <table class="cargo-info-table_body">
                    <tbody v-for="(item,index) in cargoInfos" :key="index">
                      <tr>
                        <td rowspan="2" style="width: 5%;">{{ index+1 }}</td>
                        <td style="width: 40%;">
                          <input type="text" v-model="item.GoodsName">
                        </td>
                        <td style="width: 15%;" v-if="GoodsType == '1'">
                          <input type="text" v-model="item.Lot">
                        </td>
                        <td style="width: 10%;">
                          <input type="text" v-model="item.Number">
                        </td>
                        <td style="width: 10%;">
                          <input type="text" v-model="item.Weight">
                        </td>
                        <td style="width: 10%;">
                          <input type="text" v-model="item.Volume">
                        </td>
                        <td style="width: 10%;">
                          <button @click="addRow(index)" class="ivu-icon ivu-icon-md-add"></button>
                          <button @click="copyRow(index)" class="ivu-icon ivu-icon-md-copy"></button>
                          <button @click="removeRow(index)" class="ivu-icon ivu-icon-md-remove"></button>
                        </td>
                      </tr>
                      <tr>
                        <td colspan="6">{{ item.specification }} {{ item.manufacturer }}</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
              <Row :gutter="16">
                <i-col span="8">
                  <div class="common-input">
                    <span class="prepend">总件数</span>
                    <div class="common-input-flex tar">
                      <i-input v-model="receipt.detailAddress" />
                    </div>
                    <span class="append unit">件</span>
                  </div>
                </i-col>
                <i-col span="8">
                  <div class="common-input">
                    <span class="prepend">总重量</span>
                    <div class="common-input-flex tar">
                      <i-input v-model="receipt.detailAddress" />
                    </div>
                    <span class="append unit">公斤</span>
                  </div>
                </i-col>
                <i-col span="8">
                  <div class="common-input">
                    <span class="prepend">总体积</span>
                    <div class="common-input-flex tar">
                      <i-input v-model="receipt.detailAddress" />
                    </div>
                    <span class="append unit">立方米</span>
                  </div>
                </i-col>
              </Row>
            </div>
          </div>
        </i-col>
        <i-col span="12">
          <!-- 物流服务要求 -->
          <div class="order-entry">
            <div class="order-entry_title">
              <h4>物流服务要求</h4>
              <span>
                <i class="ivu-icon ivu-icon-ios-arrow-up" ref="orderToggleIcon5"></i>
                <b @click="orderToggleTitle5()" ref="orderToggleTitle5">收起</b>
              </span>
            </div>
            <div class="order-entry_content" v-if="orderToggleContent5">
              <Row :gutter="16">
                <i-col span="24">
                  <Checkbox v-model="service.checkedPickup" class="fl">上门提货</Checkbox>
                  <div class="common-input percent40">
                    <span class="prepend">提货时间</span>
                    <div class="common-input-flex">
                      <date-picker type="date" v-model="service.date" :disabled="!service.checkedPickup"></date-picker>
                    </div>
                  </div>
                  <Checkbox v-model="service.checkedDelivery" class="fl ml-10">送货上门</Checkbox>
                  <Checkbox v-model="service.checkedSigning" class="fl">原件签收</Checkbox>
                </i-col>
              </Row>
              <Row :gutter="16">
                <i-col span="8">
                  <div class="common-input">
                    <span class="prepend">温度要求</span>
                    <div class="common-input-flex">
                      <i-select v-model="service.selectTemperature">
                        <i-option v-for="item in service.temperature" :value="item.value" :key="item.value">{{item.label }}</i-option>
                      </i-select>
                    </div>
                  </div>
                </i-col>
                <i-col span="8">
                  <div class="common-input">
                    <span class="prepend">配送方式</span>
                    <div class="common-input-flex">
                      <i-select v-model="service.selectDelivery">
                        <i-option v-for="item in service.delivery" :value="item.value" :key="item.value">{{item.label }}</i-option>
                      </i-select>
                    </div>
                  </div>
                </i-col>
                <i-col span="8">
                  <div class="common-input">
                    <span class="prepend">货物外形</span>
                    <div class="common-input-flex">
                      <i-select v-model="service.selectShape">
                        <i-option v-for="item in service.shape" :value="item.value" :key="item.value">{{item.label }}</i-option>
                      </i-select>
                    </div>
                  </div>
                </i-col>
              </Row>
              <Row :gutter="16">
                <i-col span="24">
                  <Checkbox v-model="service.checked1">冷链运输</Checkbox>
                  <Checkbox v-model="service.checked2">物控</Checkbox>
                  <Checkbox v-model="service.checked3">不与其它货物混放</Checkbox>
                  <Checkbox v-model="service.checked4">专人押运</Checkbox>
                  <Checkbox v-model="service.checked5">是否返单</Checkbox>
                </i-col>
              </Row>
              <Row :gutter="16">
                <i-col span="24">
                  <Checkbox v-model="service.checkedCarrier" class="fl">指定承运商</Checkbox>
                  <div class="common-input percent40">
                    <div class="common-input-flex">
                      <i-select v-model="service.selectCarrier" :disabled="!service.checkedCarrier">
                        <i-option v-for="item in service.carrier" :value="item.value" :key="item.value">{{item.label }}</i-option>
                      </i-select>
                    </div>
                  </div>
                </i-col>
              </Row>
              <Row :gutter="16">
                <i-col span="24">
                  <div class="common-input">
                    <span class="prepend">待发区</span>
                    <div class="common-input-flex">
                      <i-input v-model="service.pendingArea" />
                    </div>
                  </div>
                </i-col>
              </Row>
              <Row :gutter="16">
                <i-col span="8">
                  <div class="common-input">
                    <span class="prepend">保价费</span>
                    <div class="common-input-flex tar">
                      <i-input v-model="service.insurance" />
                    </div>
                    <span class="append unit">元</span>
                  </div>
                </i-col>
              </Row>
            </div>
          </div>
        </i-col>
      </Row>
      <!-- 费用信息 -->
      <div class="order-entry">
        <div class="order-entry_title">
          <h4>费用信息</h4>
          <span>
            <i class="ivu-icon ivu-icon-ios-arrow-up" ref="orderToggleIcon6"></i>
            <b @click="orderToggleTitle6()" ref="orderToggleTitle6">收起</b>
          </span>
        </div>
        <div class="order-entry_content" v-if="orderToggleContent6">
          <Row :gutter="16">
            <i-col class="percent20">
              <div class="common-input">
                <span class="prepend">物流类型</span>
                <div class="common-input-flex">
                  <i-select v-model="fee.selectType">
                    <i-option v-for="item in fee.type" :value="item.value" :key="item.value">{{item.label }}</i-option>
                  </i-select>
                </div>
              </div>
            </i-col>
            <i-col class="percent20">
              <div class="common-input">
                <span class="prepend">运输费</span>
                <div class="common-input-flex">
                  <i-input v-model="fee.transportation" />
                </div>
                <span class="append unit">元</span>
              </div>
            </i-col>
            <i-col class="percent20">
              <div class="common-input">
                <span class="prepend">付款方式</span>
                <div class="common-input-flex">
                  <i-select v-model="fee.selectPayment">
                    <i-option v-for="item in fee.payment" :value="item.value" :key="item.value">{{item.label }}</i-option>
                  </i-select>
                </div>
              </div>
            </i-col>
            <i-col class="percent20">
              <Checkbox v-model="fee.checkedCollection" class="fl">代收货款</Checkbox>
              <div class="common-input percent40">
                <div class="common-input-flex tar">
                  <i-input v-model="fee.collection" :disabled="!fee.checkedCollection">
                </div>
                <span class="append unit">元</span>
              </div>
            </i-col>
          </Row>
          <Row :gutter="16">
            <i-col span="24">
              <div>
                <b>收款人附加费</b>
                <button @click="addSurcharge()" class="orange-btn ml-20">点击添加附加费</button>
              </div>
            </i-col>
          </Row>
        </div>
      </div>
      <!-- 备注信息 -->
      <div class="order-entry">
        <div class="order-entry_title">
          <h4>备注信息</h4>
        </div>
        <div class="order-entry_content">
          <Row :gutter="16">
            <i-col span="24">
              <i-input v-model="remarks" type="textarea" />
            </i-col>
          </Row>
        </div>
      </div>

      <!-- 选择货物 -->
      <Modal v-model="goodsModal" title="选择常用货物" @on-ok="goodsOk" @on-cancel="goodsCancel" width="765">
        <i-table :columns="goodsTableColumn" :data="goodsTableData" ref="selectionGoods" stripe></i-table>
      </Modal>
      <!-- 附加费 -->
      <Modal v-model="surchargeModal" title="附加费" @on-ok="surchargeOk" @on-cancel="surchargeCancel" width="765">
        <Row :gutter="16">
          <i-col span="12">
            <div class="common-input">
              <span class="prepend required">费用项</span>
              <div class="common-input-flex">
                <i-select v-model="surcharge.selectExpenseItem">
                  <i-option v-for="item in surcharge.expenseItem" :value="item.value" :key="item.value">{{item.label }}</i-option>
                </i-select>
              </div>
            </div>
          </i-col>
          <i-col span="12">
            <div class="common-input">
              <span class="prepend required">金额</span>
              <div class="common-input-flex tar">
                <i-input v-model="surcharge.money"></i-input>
              </div>
              <span class="append unit">元</span>
            </div>
          </i-col>
        </Row>
      </Modal>
    </div>
  </div>

  <script src="src/js/vue.js"></script>
  <script src="src/js/axios.min.js"></script>
  <script src="src/js/iview.min.js"></script>
  <script>
    var appLayout = new Vue({
      el: '#app',
      data: {
        shipmentNumber: '',
        businessNumber: '',
        pickupNumber: '',
        shipper: {
          checked: false,
          sender: '',
          contact: '',
          unit: '',
          tel: '',
          address: '',
          detailAddress: '',
          startDate: '',
          endDate: '',
          deadline: ''
        },
        receipt: {
          checked: false,
          receiver: '',
          network: '',
          unit: '',
          tel: '',
          address: '',
          detailAddress: '',
          selectRegion: '',
          region: {}
        },
        goods: {
          selectType: '',
          type: [
            {
              value: '药品CS',
              label: '药品CS'
            }, {
              value: '西药',
              label: '西药'
            }, {
              value: '普货TSL',
              label: '普货TSL'
            }
          ]
        },
        goodsModal: false,
        goodsTableColumn: [
          {
            type: 'selection',
            width: 40,
            align: 'center'
          }, {
            type: 'index',
            title: '序号',
            key: 'index',
            width: 40,
            align: 'center'
          }, {
            title: '货物类型',
            key: 'type',
            width: 80,
            align: 'center'
          }, {
            title: '货物编号',
            key: 'number',
            width: 100,
            align: 'center'
          }, {
            title: '货物名称',
            key: 'name',
            width: 130,
            align: 'center'
          }, {
            title: '规格',
            key: 'specification',
            width: 100,
            align: 'center'
          }, {
            title: '生产厂商',
            key: 'manufacturer',
            width: 140,
            align: 'center'
          }, {
            title: '毛重',
            key: 'grossWeight',
            width: 50,
            align: 'center'
          }, {
            title: '体积',
            key: 'volume',
            width: 50,
            align: 'center'
          }
        ],
        goodsTableData: [],
        GoodsType: -1,
        cargoInfos: [
          {
            GoodsName: '',
            Lot: '',
            Number: '',
            Weight: '',
            Volume: '',
            Specifications: '',
            Manufacturer: ''
          }
        ],
        service: {
          checkedPickup: false,
          date: '',
          checkedDelivery: false,
          checkedSigning: false,
          selectTemperature: '',
          temperature: [
            {
              value: '常温',
              label: '常温'
            }, {
              value: '冷藏',
              label: '冷藏'
            }, {
              value: '冷冻',
              label: '冷冻'
            }
          ],
          selectDelivery: '',
          delivery: [
            {
              value: '平台配送',
              label: '平台配送'
            }, {
              value: '自提',
              label: '自提'
            }
          ],
          selectShape: '',
          shape: [
            {
              value: '普通',
              label: '普通'
            }, {
              value: '特殊',
              label: '特殊'
            }
          ],
          checked1: false,
          checked2: false,
          checked3: false,
          checked4: false,
          checked5: false,
          checkedCarrier: false,
          selectCarrier: '',
          carrier: [
            {
              value: '京东物流有限公司',
              label: '京东物流有限公司'
            }, {
              value: '天猫物流有限公司',
              label: '天猫物流有限公司'
            }, {
              value: '药聚多物流有限公司',
              label: '药聚多物流有限公司'
            }
          ],
          pendingArea: '',
          insurance: ''
        },
        fee: {
          selectType: '',
          type: [
            {
              value: '合同物流订单',
              label: '合同物流订单'
            }, {
              value: '临时物流订单',
              label: '临时物流订单'
            }, {
              value: '代理物流订单',
              label: '代理物流订单'
            }
          ],
          transportation: '',
          selectPayment: '',
          payment: [
            {
              value: '月结',
              label: '月结'
            }, {
              value: '现结',
              label: '现结'
            }, {
              value: '到付',
              label: '到付'
            }
          ],
          checkedCollection: false,
          collection: ''
        },
        surchargeModal: false,
        surcharge: {
          selectExpenseItem: '',
          expenseItem: [
            {
              value: '等待费',
              label: '等待费'
            }, {
              value: '上楼费',
              label: '上楼费'
            }, {
              value: '装卸费',
              label: '装卸费'
            }, {
              value: '机场提货费',
              label: '机场提货费'
            }
          ],
          money: ''
        },
        remarks: '',
        orderToggleContent1: true,
        orderToggleContent2: true,
        orderToggleContent3: true,
        orderToggleContent4: true,
        orderToggleContent5: true,
        orderToggleContent6: true,
      },
      mounted() {
        this.getGoodsTableData()
      },
      methods: {
        getGoodsTableData() {
          axios.get('static/goods.json').then((res) => {
            this.goodsTableData = res.data.Datas
          })
        },
        goodsOk() {},
        goodsCancel() {},
        // 附加费
        addSurcharge() {
          this.surchargeModal = true
        },
        surchargeOk() {},
        surchargeCancel() {},
        // 货物信息
        addRow(index) {
          this.cargoInfos.splice(index + 1, 0, {
            GoodsName: '',
            Lot: '',
            Number: null,
            Weight: null,
            Volume: null,
            Specifications: '',
            Manufacturer: '',
          });
        },
        copyRow(index) {
          this.cargoInfos.splice(index + 1, 0, {
            GoodsName: this.cargoInfos[index].GoodsName,
            Lot: '',
            Number: this.cargoInfos[index].Number,
            Weight: this.cargoInfos[index].Weight,
            Volume: this.cargoInfos[index].Volume,
            Specifications: this.cargoInfos[index].Specifications,
            Manufacturer: this.cargoInfos[index].Manufacturer,
          });
        },
        removeRow(index) {
          if (this.cargoInfos.length == 1) {
            this.cargoInfos[0].GoodsGuid = '';
            this.cargoInfos[0].GoodsName = '';
            this.cargoInfos[0].Lot = '';
            this.cargoInfos[0].Number = null;
            this.cargoInfos[0].Weight = null;
            this.cargoInfos[0].Volume = null;
            this.cargoInfos[0].Specifications = '';
            this.cargoInfos[0].Manufacturer = '';
          } else {
            this.cargoInfos.splice(index, 1);
          }
        },
        // 收起
        orderToggleTitle1() {
          this.$refs.orderToggleIcon1.style.transform = !this.orderToggleContent1 ? "rotate(0)" : "rotate(180deg)"
          this.$refs.orderToggleTitle1.innerText = !this.orderToggleContent1 ? "收起" : "展开"
          this.orderToggleContent1 = !this.orderToggleContent1
        },
        orderToggleTitle2() {
          this.$refs.orderToggleIcon2.style.transform = !this.orderToggleContent2 ? "rotate(0)" : "rotate(180deg)"
          this.$refs.orderToggleTitle2.innerText = "展开"
          this.orderToggleContent2 = !this.orderToggleContent2
        },
        orderToggleTitle3() {
          this.$refs.orderToggleIcon3.style.transform = !this.orderToggleContent3 ? "rotate(0)" : "rotate(180deg)"
          this.$refs.orderToggleTitle3.innerText = "展开"
          this.orderToggleContent3 = !this.orderToggleContent3
        },
        orderToggleTitle4() {
          this.$refs.orderToggleIcon4.style.transform = !this.orderToggleContent4 ? "rotate(0)" : "rotate(180deg)"
          this.$refs.orderToggleTitle4.innerText = "展开"
          this.orderToggleContent4 = !this.orderToggleContent4
        },
        orderToggleTitle5() {
          this.$refs.orderToggleIcon5.style.transform = !this.orderToggleContent5 ? "rotate(0)" : "rotate(180deg)"
          this.$refs.orderToggleTitle5.innerText = "展开"
          this.orderToggleContent5 = !this.orderToggleContent5
        },
        orderToggleTitle6() {
          this.$refs.orderToggleIcon6.style.transform = !this.orderToggleContent6 ? "rotate(0)" : "rotate(180deg)"
          this.$refs.orderToggleTitle6.innerText = "展开"
          this.orderToggleContent6 = !this.orderToggleContent6
        },
      },
      watch: {
        
      }
    })
  </script>
</body>

</html>